<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中显示</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box-one{
				width: 100px;
				height: 100px;
				/*盒子水平居中 margin:auto*/
				margin: auto;
				background: pink;
				/*内容水平居中  text-align:center*/
				text-align: center;
				/*内容垂直居中  line-height:盒子高度*/
				line-height: 100px;
			}
			.box-two{
				position: relative;
				width: 300px;
				height: 300px;
				border: red solid 2px;
				margin: 20px auto;
			}
			.box-three{
				position: absolute;
				top: 100px;
				left: 100px;
				width: 100px;
				height: 100px;
				background: green;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box-one">文字居中</div>
		<div class="box-two">
			<div class="box-three">盒子中心显示用定位</div>
		</div>
	</body>
</html>
